<template>
  <div>
    <p>我是home页</p>
    <button @click="$router.go(-1)">返回上一页</button>
    <hr />
    <!-- 标准语法: 操作的一级模块的stote数据 -->
    <p>store中count:{{ $store.state.count }}</p>
    <p>store中doubleCount:{{ $store.getters.doubleCount }}</p>
    <p>
      <button @click="addFn">+1</button>
      <button @click="addStepFn">+10</button>
      <button @click="addAsyncFn">异步+1</button>
      <button @click="addAsyncStepFn">异步+n</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "123",
      str: "abcdefg",
    };
  },
  created() {
    //获取参数
    // console.log(this.$route.params);
    console.log(1, this);
  },
  computed: {
    uppercase() {
      return this.str.toUpperCase();
    },
  },
  methods: {
    addFn() {
      // 提交vuex中mutations 中的add 方法,相当于调用
      this.$store.commit("add");
    },
    addStepFn() {
      this.$store.commit("addStep", 10);
    },
    addAsyncFn() {
      this.$store.dispatch("addAsync");
    },
    addAsyncStepFn() {
      this.$store.dispatch("addStepAsync", 10);
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   // 在渲染该组件的对应路由被 confirm 前调用
  //   // 不！能！获取组件实例 `this`
  //   // 因为当守卫执行前，组件实例还没被创建
  //   // console.log(3, to);
  //   next((vm) => {
  //     // 通过 `vm` 访问组件实例
  //     // console.log(2, vm);
  //   });

  //   // console.log(1, this);
  // },
  // beforeRouteUpdate(to, from, next) {
  //   // 在当前路由改变，但是该组件被复用时调用
  //   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  //   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //   // 可以访问组件实例 `this`

  //   next();
  //   // 一般可以用来根据路由参数的变化,执行相关逻辑操作
  //   console.log("beforeRouteUpdate", "参数改变了");
  // },
  // beforeRouteLeave(to, from, next) {
  //   // 导航离开该组件的对应路由时调用
  //   // 可以访问组件实例 `this`
  //   // console.log(from); from 表示当前路由信息对象 /home
  //   next();
  // },
};
</script>
<style scoped>
</style>